<template>  
  <div  
    class="drag-container column"  
    @mousedown="startDrag"  
    @mouseup="endDrag"  
    @mousemove.prevent="onMouseMove"  
    @mouseleave="endDrag" 
  >  
    <div  
      v-for="(item, index) in checkboxList"   
      :key="index"  
      class="checkbox-item"  
    >  
      <input type="checkbox" :value="item.value" v-model="selectedItems" />  
      <span>{{ item?.label }}</span>  
    </div>  
  </div>  
  <div v-if="dragging" class="drag-preview" :style="dragPreviewStyle"></div> <!-- Drag preview area -->  
</template>  

<script setup>  
import { ref } from 'vue';  

const checkboxList = ref([  
  { label: '选项1', value: 'option1' },  
  { label: '选项2', value: 'option2' },  
  { label: '选项3', value: 'option3' },  
  { label: '选项4', value: 'option4' },  
  { label: '选项5', value: 'option5' },  
]);  

const selectedItems = ref([]);  
let startX;  
let startY;  
let endX;  
let endY;  
let isDragging = false;  
const dragging = ref(false);  
const dragPreviewStyle = ref({});  

const startDrag = (e) => {  
  startX = e.clientX;  
  startY = e.clientY;  
  isDragging = true;  
  dragging.value = true;  
};  

const endDrag = (e) => {  
  if (!isDragging) return;  
  endX = e.clientX;  
  endY = e.clientY;  
  isDragging = false;  
  dragging.value = false;  
  handleDragEnd();  
};  

const onMouseMove = (e) => {  
  if (isDragging) {  
    endX = e.clientX;  
    endY = e.clientY;  
    dragPreviewStyle.value = {  
      left: Math.min(startX, endX) + 'px',  
      top: Math.min(startY, endY) + 'px',  
      width: Math.abs(endX - startX) + 'px',  
      height: Math.abs(endY - startY) + 'px',  
      position: 'absolute',  
      backgroundColor: 'rgba(200, 200, 255, 0.5)',  
      border: '1px dashed #aaa',  
      pointerEvents: 'none', // Make the drag area non-interactive  
    };  
  }  
};  

const handleDragEnd = () => {  
  const elements = document.querySelectorAll('.drag-container input[type="checkbox"]');  
  const rect = {   
    left: Math.min(startX, endX),   
    top: Math.min(startY, endY),   
    right: Math.max(startX, endX),   
    bottom: Math.max(startY, endY)   
  };  

  for (const element of elements) {  
    const checkboxRect = element.getBoundingClientRect();  

    const isInRangeX = !(rect.right < checkboxRect.left || rect.left > checkboxRect.right);  
    const isInRangeY = !(rect.bottom < checkboxRect.top || rect.top > checkboxRect.bottom);  

    const isChecked = selectedItems.value.includes(element.value);  
    
    if (isInRangeX && isInRangeY) {  
      if (!isChecked) {  
        selectedItems.value.push(element.value);  
      }  
    } else {  
      if (isChecked) {  
        const index = selectedItems.value.indexOf(element.value);  
        if (index > -1) {  
          selectedItems.value.splice(index, 1);  
        }  
      }  
    }  
  }  
};  
</script>  

<style scoped>  
.drag-container {  
  border: 1px solid #ccc;  
  padding: 10px;  
  margin-bottom: 10px;  
  user-select: none;  
  position: relative; /* Allow positioning of preview */  
}  

.drag-container .checkbox-item {  
  display: flex;  
  align-items: center;  
}  

.drag-preview {  
  background-color: rgba(200, 200, 255, 0.5);  
  border: 1px dashed #aaa;  
  user-select: none;  
  position: absolute;  
  z-index: 10; /* Make sure it's above other elements */  
}  
</style>